<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <link rel="stylesheet" href="./css/addressList.css">
</head>
<body>
  <div id="appLoading">
   <img src="./images/loading.gif" width="50px" height="50px">
   <div class="loading-text">加载中......</div>
  </div>
  <div id="AddressList" style="display:none">
    <mt-header title="地址列表">
      <mt-button onclick="javascript:history.back(-1);" icon="back">返回</mt-button>
    </mt-header>
  <el-radio-group class="add-adrs-main" v-model="defaultAdr" @change="DefaultAdrs">
    <div class="address-card" v-for="adr in AddressList">
      <el-row>
        <span class="adr-name">{{adr.name}}</span>
        <span class="adr-phone">{{adr.phone}}</span>
      </el-row>
      <el-row>
        <div class="adr-address">{{adr.address}}</div>
      </el-row>
      <el-row>
        <div class="adr-choice">
          <el-radio :label="adr.id">设为默认地址</el-radio>
          <div class="adr-cho-btn" @click="Delete(adr.id)">
            <i class="el-icon-delete"></i>
            <span>删除</span>
          </div>
          <div class="adr-cho-btn">
            <i class="el-icon-edit"></i>
            <span>编辑</span>
          </div>
        </div>
      </el-row>
    </div>
  </el-radio-group>
  <div class="add-adrs-btn">
    <mt-button type="primary">添加新地址</mt-button>
  </div>
  </div>

</body>
  <script src="./js/vue.min.js"></script>
  <script src="./js/element-ui.js"></script>
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script src="./js/axios.min.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#AddressList",
      data(){
        return{
          defaultAdr: [],
          AddressList: [
            {
              id: 1,
              name: 'Meej',
              phone: "1398276262",
              address: "浙江省嘉兴市嘉善县XXXXX",
              defCheck: true
            },
            {
              id: 2,
              name: 'Meej',
              phone: "1398276262",
              address: "浙江省嘉兴市嘉善县XXXXX",
              defCheck: false
            },
            {
              id: 3,
              name: 'Meej',
              phone: "1398276262",
              address: "浙江省嘉兴市嘉善县XXXXX",
              defCheck: false
            },
            {
              id: 4,
              name: 'Meej',
              phone: "1398276262",
              address: "浙江省嘉兴市嘉善县XXXXX",
              defCheck: false
            },
            {
              id: 5,
              name: 'Meej',
              phone: "1398276262",
              address: "浙江省嘉兴市嘉善县XXXXX",
              defCheck: false
            },
            {
              id: 6,
              name: 'Meej',
              phone: "1398276262",
              address: "浙江省嘉兴市嘉善县XXXXX",
              defCheck: false
            },
            {
              id: 7,
              name: 'Meej',
              phone: "1398276262",
              address: "浙江省嘉兴市嘉善县XXXXX",
              defCheck: false
            }
          ]
        }
      },
      methods: {
        DefaultAdrs(val){
          console.log(val);
          // axios.post('/',{
          //   deleId: val
          // })
          // .then(function(res){
          //   console.log(res);
          // })
          // .catch(function(err){
          //   console.log(err);
          // })
        },
        Delete(id){
          console.log(id);
          this.$messagebox.confirm('确认删除？')
          .then(action => {
            // axios.post('/',{
            //   deleId: id
            // })
            // .then(function(res){
            //   console.log(res);
            //   //响应之后把for循环里的东西放进来，我成功post之后要把页面上的节点删除。
            // })
            // .catch(function(err){
            //   console.log(err);
            // })
            for (var i = 0; i < this.AddressList.length; i++) {
              if (this.AddressList[i].id == id) {
                this.AddressList.splice(i,1);
                console.log("删掉了");
              }
            }
          })
        }
      },
      mounted(){
        document.getElementById('AddressList').style.display = 'block';
        document.getElementById('appLoading').style.display = 'none';
        for (var i = 0; i < this.AddressList.length; i++) {
          if (this.AddressList[i].defCheck) {
            this.defaultAdr = this.AddressList[i].id
          }
        }
      }
    })
  </script>
</html>
